<template>
  <div class="container">
    <div class="order">
      <el-card v-if="state.items.length" class="order-item"
        v-for="(item, index) in state.items" :key="index"
        :color="item.color">
        <template #header>
          <div class="card-header">
            {{ item.value }}
            <span>{{ item.suffix }}</span>
          </div>
        </template>
        <div class="item">{{ item.title }}</div>
      </el-card>
    </div>

    <!-- 销售额柱状图 -->
    <el-card class="introduce" shadow="never" style="margin-bottom: 16px;">
      <my-chart :options="state.salesOption"/>
    </el-card>

    <!-- 近一周的数据统计 -->
    <el-card class="introduce" shadow="never">
      <my-chart :options="state.lineOption"/>
    </el-card>
  </div>
</template>

<script setup>
import MyChart from "../components/MyChart.vue";

import { onMounted, reactive } from 'vue'
import { AdminStatisticsPost } from "../api/server/admin";

const state = reactive({
  items: [],
  salesOption: {},
  lineOption: {}
})


onMounted(async () => {
  const { sales, lines, labels } = await getStatistics()
  state.salesOption = salesOption(sales)
  state.lineOption = lineOption(lines, labels)
  
  settingCardStyle()
})


const getStatistics = async () => {
  const { data: { items, labels, lines, sales } } = await AdminStatisticsPost()
  state.items = settingCardItem(items)
  return { lines, sales, labels }
}

/**
 * 设置卡片的数据
 */
const settingCardItem = (items) => {
  const initial = [
    { color: '#81c784', suffix: '人' },
    { color: '#409EFF', suffix: '人' },
    { color: '#ffc107', suffix: '单' },
    { color: '#ff9800', suffix: '单' },
    { color: '#f56c6c', suffix: '元' }
  ]
  return items.map((item, index) => {
    return { ...item, ...initial[index] }
  })
}

/**
 * 设置卡片样式
 */
const settingCardStyle = () => {
  const ds = document.querySelectorAll(".order-item")
  Array.from(ds).forEach(el => {
    const color = el.getAttribute('color')
    el.firstChild.style.color = color
    el.lastChild.style.backgroundColor = color
  })
}

const salesOption = (items) => {
  return {
    title: {
      text: '近十二月的销售额'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['销售金额']
    },
    grid: {
      //   left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      data: Array.from(items, ({ pay_at }) => pay_at)
    },
    yAxis: {},
    series: [
      {
        name: '销售金额',
        type: 'bar',
        data: Array.from(items, ({ pay_fee }) => pay_fee),
        label: { show: true, position: 'top' }
      }
    ]
  }
}

const lineOption = (result, xAxisData) => {
  const seriesItemDefualt = {
    type: 'line', stack: '总量', areaStyle: {},
    emphasis: { focus: 'series' },
    label: { show: true, position: 'top' }
  }
  const seriesData = result.map(item => {
    return { ...item, ...seriesItemDefualt }
  })
  return {
    title: {
      text: '近一周的数据统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: Array.from(result, ({ name }) => name)
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      //   left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxisData
      }
    ],
    yAxis: [{ type: 'value' }],
    series: seriesData
  }
}

</script>

<style scoped>
.container {
  padding: 0 20px;
}

.container .order {
  display: flex;
  margin-bottom: 20px;
}

.container .order .order-item {
  flex: 1;
  margin-right: 20px;
}

.container .order .order-item .card-header {
  font-size: 24px;
  text-align: center;
}

.container .order .order-item .card-header span {
  font-size: 10px;
}

.container .order .order-item .item {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.container .order .order-item:last-child {
  margin-right: 0;
}

:deep(.my-chart) {
  min-height: calc(calc(100vh - 350px) / 2);
}
</style>
